<template>
    <div class="nav">
        <div class="navList">
            <div class="leftList">
                <a :href="v.address" :class="`${v.id==isActive?'active':''} navItem`" v-for="(v,i) in navArr" :key="i">{{v.name}}</a>
            </div>
            <div class="rightList">
                <a href="ShoppingCart.html" class="trolley">购物车</a>
                <a href="login.html" class="login" v-if="isLogin==1">登录</a>
                <span v-if="isLogin==1">/</span>
                <a href="register.html" class="login" v-if="isLogin==1">注册</a>
                <a href="userDetail.html" class="personal" v-if="isLogin==2">个人中心</a>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'Nav',
    data(){
        return {
            navArr:[
                {id:1,name:'首页',address:'index.html'},
                {id:2,name:'桌子',address:'/ItemList.html?category_id=1'},
                {id:3,name:'沙发',address:'/ItemList.html?category_id=2'},
                {id:4,name:'床',address:'/ItemList.html?category_id=3'},
                {id:5,name:'茶几',address:'/ItemList.html?category_id=4'},
                {id:6,name:'柜子',address:'/ItemList.html?category_id=5'},
                {id:7,name:'椅子',address:'/ItemList.html?category_id=6'},
                ],
            isActive:2,
            isLogin:2
        }
    },
    methods:{
    },
    mounted(){
        var userId=localStorage.getItem('userID');
        if(userId==null){
            this.isLogin=1
        }else{
            this.isLogin=2
        }

        let str=location.search;
        let i=str.indexOf('=')+1;
        this.isActive=parseInt(str.substr(i))+1;
    }
}
</script>

<style lang="less" scoped>
.nav{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 60px;
    box-shadow: 2px 2px 4px #808285;//  rgb(18, 199, 231)
    background: white;
    z-index: 1000;

    .navList{
        width: 1000px;
        height: 60px;
        margin: 0 auto;

        .leftList{
            float: left;
            width: 880px;
            height: 60px;

            .navItem{
                width: 60px;
                margin-left: 50px;
                height: 57px;
                line-height: 57px;
                text-align: center;
                font-size: 18px;
                color: #aaa;
                float: left;

                &:hover{
                    color:red
                }
                
                &.active{
                    color: #666;
                    border-bottom: 3px solid #777;
                }
            }
        }

        .rightList{
            float: right;
            width: 120px;
            height: 60px;
            line-height: 60px;
            font-size: 12px;

            a{
                width: 30px;
                height: 60px;
                color: #666;
                float: left;

                &:hover{
                    color: red;
                }

                &.trolley{
                    width: 50px;
                }

                &.personal{
                    width: 60px;
                }
            }

            span{
                display: block;
                float: left;
                width: 10px;
                height: 60px;
            }
        }
    }
}
</style>